<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{name}}</h2> <!--在模板中解析RefImpl数据时，不用加.value，vue会自动调用.value-->
  <h2>年龄：{{age}}</h2>
  <h2>工作信息</h2>
  <h3>工作种类：{{job.type}}</h3>
  <h3>工作薪水：{{job.salary}}</h3>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script>
import {ref} from 'vue' //引入vue3的ref函数，注意区别于vue2中的ref属性

export default {
  name: 'App',
  setup() {
    //错误写法，没有响应式
    // let name = '张三'
    // let age = 18

    //正确写法，此处的name，age是一个RefImpl类型对象
    //基本类型
    let name = ref('张三')
    let age = ref(18)
    //对象类型
    let job = ref({
      type: '前端工程师',
      salary: '30k'
    })

    function changeInfo() {
      console.log('修改数据前', name, age)

      //错误写法
      // name = '李四',
      // age = 48

      //正确写法
      name.value = '李四'
      age.value = 48
      //修改对象中的属性写法，这里job.value是一个Proxy实例对象，可以直接访问对象的属性，不需要再加.value
      job.value.type = '后端工程师'
      job.value.salary = '40k'

      //这里修改了数据，如果不用ref函数，就没有响应式，页面上不会变化
      console.log('修改数据后', name, age)
    }

    return {
      name,
      age,
      changeInfo,
      job,
    }
  }
}
</script>

<style>
</style>
